import React, { Fragment, useEffect, useState } from 'react';
import { Layout, Input, Button, Table, Modal, Form } from 'antd';
import axios from 'axios';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { useForm } from 'antd/lib/form/Form';


const { Content } = Layout;
const { Search } = Input;
const { confirm } = Modal;
function Staffz(props) {

    //定义状态
    //客服列表
    var [staffList,setStaffList] =  useState([]);
    //loading状态
    var [loading,setLoading] =  useState(false);
    //分页信息
    var [pagination,setPagination ] = useState({ current:1,pageSize:5 });
    //form表单
    var [form] = useForm()
    //添加状态isModalVisible,控制模态框的显示/隐藏
    var [isModalVisible,setIsModalVisible] = useState(false);

    //点击搜索,发起搜索请求,实现模糊搜索
    const onSearch = (value)=>{
        console.log(value);
    };


function showConfirm(e) {
    confirm({
        title: '确定要删除该客服吗?',
        icon: <ExclamationCircleOutlined />,
        content: '该用户等级较高,请谨慎操作!',
        okType: 'danger',
        onOk() { //点击 确定 执行删除动作
          axios.post("/api/deleteStaff",{id:e.target.id,...pagination }).then((res)=>{
            setStaffList( res.data.list );
            setPagination( { ...pagination, total: res.data.total } )
          })
        },
        onCancel() {
          
        },
      });
    }
    const columns = [
        {
            title: '账号',
            dataIndex: 'user',
        },
        {
            title: '昵称',
            dataIndex: 'nickname',
        },
        {
            title: '姓名',
            dataIndex: 'name',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
        },
        {
            title: '类型',
            dataIndex: 'type',
        },
        {
            title: '角色',
            dataIndex: 'role',
        },
        {
            title: '操作',
            render: (text, record) => (
                <>
                    <span className="iconfont icon-xiugai" id={record._id} name={record.name} user={record.user} phone={record.phone} onClick={(e) => { edit(e) }}></span>
                    <spam className="iconfont icon-shanchu" id={record._id} onClick={showConfirm}></spam>
                </>
            )
        }
    ];
    const edit = (e) => {
        form.setFieldsValue({ id: e.target.id, user: e.target.getAttribute('user'), name: e.target.getAttribute('name'), phone: e.target.getAttribute('phone') })
        setIsModalVisible(true);//显示对话框
    }
    // var [staffList, setStaffList] = useState([]);
    // var [loading, setLoading] = useState(false);
    // var [pagination, setPagination] = useState({ current: 1, pageSize: 5 });
    // var [form] = useForm()

    useEffect(() => {
        setLoading(true);//显示loading
        axios.get("/api/staff", { params: pagination }).then((res) => {
            setLoading(false);//隐藏loading
            setStaffList(res.data.list);
            setPagination({ ...pagination, total: res.data.total })
        })
    }, [])
    const handleChange = (newpagination) => {
        //newpagination 保存了最新点击的页码, 总数, 每页条数
        setLoading(true);//显示loading
        axios.get("/api/staff", { params: newpagination }).then((res) => {
            setLoading(false);//隐藏loading
            setStaffList(res.data.list);
            setPagination({ ...newpagination, total: res.data.total })
        })
    }
    // var [isModalVisible, setIsModalVisible] = useState(false);
    //处理 确认逻辑
    const handleOk = () => {
        setIsModalVisible(false);
    };
    //处理 取消逻辑
    const handleCancel = () => {
        setIsModalVisible(false);
      }
    const onFinish = (values) => {
        console.log('Success:', values);
        if (values.id) { //有id, 说明是编辑
            //发起 添加客服请求
            axios.post("/api/editStaff", { ...values, ...pagination }).then((res) => {
                setStaffList(res.data.list);//保存最新的分页表格数据
                setPagination({ ...pagination, total: res.data.total })//保存最新的分页数据
                setIsModalVisible(false);//隐藏对话框
            })
        }
        else { //添加
            //发起 添加客服请求
            axios.post("/api/addStaff", { ...values, ...pagination }).then((res) => {
                setStaffList(res.data.list);
                setPagination({ ...pagination, total: res.data.total })
                setIsModalVisible(false);
            })
        }
        form.setFieldsValue( {id:'', user:'',name:'',phone:'' } )
    };
    return (
        <div className="staffz">
            <Layout style={{ padding: '0 24px 24px' }}>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                    }}
                >
                    <div className="title">员工管理</div>
                    <Search allowClear placeholder="输入员工姓名" onSearch={onSearch} enterButton style={{ width: 300 }} />
                    {/* 新增客服 */}
                    <Button type="primary" onClick={() => { setIsModalVisible(true) }}>新增客服</Button>

                    <Table columns={columns} dataSource={staffList} pagination={pagination} onChange={handleChange} loading={loading} />

                    {/* 表单 */}
                    <Modal title="新增客服" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                        <Form
                            name="basic"
                            labelCol={{ span: 4 }}
                            wrapperCol={{ span: 16 }}
                            autoComplete="off"
                            onFinish={onFinish}
                            form={form}
                        >
                            <Form.Item
                                hidden
                                label="id"
                                name="id"
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="账号"
                                name="user"
                                rules={[{ required: true, message: '请输入账号!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="姓名"
                                name="name"
                                rules={[{ required: true, message: '请输入姓名!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="手机号"
                                name="phone"
                                rules={[{ required: true, message: '请输入手机号!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">
                                    添加客服
                                </Button>
                            </Form.Item>
                        </Form>
                    </Modal>
                </Content>
            </Layout>
        </div>
    );
}

export default Staffz;